import React, { useState, useEffect } from 'react';
import { Divider, Radio, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useSelector , useDispatch } from "react-redux";
import { UserState , AppDispatch , UserItem } from "../../utils/types";
import { get_person_action } from "../../actions";



interface MyReducer {
    userReducer: UserState
}

const columns: ColumnsType<UserItem> = [
    {
        title: '姓名',
        dataIndex: 'user',
        
    },
    {
        title: '性别',
        dataIndex: 'sex',
    },
    {
        title: '地址',
        dataIndex: 'addr',
    },
    {
        title: '电话号码',
        dataIndex: 'tel',
    },
    {
        title: '婚姻状况',
        dataIndex: 'isMarried',
        render:(record) => {
            
            return record ? <span>已婚</span> : <span>未婚</span>
        }
    },
];



// rowSelection object indicates the need for row selection
const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: UserItem[]) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },

};

const User: React.FC = () => {
    const { pageSize, limit, val , userList} = useSelector(({ userReducer }: MyReducer) => {
        return {
            ...userReducer
        }
    });

    const dispatch:AppDispatch = useDispatch();

    useEffect(() => {
        dispatch(get_person_action({
            pageSize ,
            limit ,
            val
        }));
    },[pageSize , limit , val])

    return (
        <div>


            <Divider />

            <Table
                rowSelection={{
                    type: "checkbox",
                    ...rowSelection,
                }}
                rowKey = {record => record.id}
                columns={columns}
                dataSource={userList}
            />
        </div>
    );
};

export default User;
